<%@include file="../common/top.jsp"%>
<div id="Welcome">
    <div id="WelcomeContent">
        <!--显示登录用户的name-->
    </div>
</div>

<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">
            <a href="categoryForm?categoryId=FISH"><image src="images/fish_icon.gif"/></a><br/>
            Saltwater, Freshwater <br />
            <a href="categoryForm?categoryId=DOGS"><image src="images/dogs_icon.gif"/></a><br/>
            Various Breeds <br />
            <a href="categoryForm?categoryId=CATS"><image src="images/cats_icon.gif"/></a><br/>
            Various Breeds, Exotic Varieties <br />
            <a href="categoryForm?categoryId=REPTILES"><image src="images/reptiles_icon.gif"/></a><br/>
            Lizards, Turtles, Snakes <br />
            <a href="categoryForm?categoryId=BIRDS"><image src="images/birds_icon.gif"/></a><br/>
            Exotic Varieties
        </div>
    </div>

    <div id="MainImage">
        <div id="detail_fish" ><ul id="productfish" ></ul></div>
        <div id="detail_dogs" ><ul id="productdogs"></ul></div>
        <div id="detail_reptiles" ><ul id="productreptiles"></ul></div>
        <div id="detail_cats" ><ul id="productcats"></ul></div>
        <div id="detail_birds" ><ul id="productbirds"></ul></div>
        <div id="detail_birds_copy" ><ul id="productbirds_copy"></ul></div>
        <div id="MainImageContent">
            <map name="estoremap">
                <area alt="Birds" coords="72,2,280,250"
                      href="categoryForm?categoryId=BIRDS" shape="RECT" id="BIRDS_img"/>
                <area alt="Fish" coords="2,180,72,250"
                      href="categoryForm?categoryId=FISH" shape="RECT" id="FISH"/>
                <area alt="Dogs" coords="60,250,130,320"
                      href="categoryForm?categoryId=DOGS" shape="RECT" id="DOGS"/>
                <area alt="Reptiles" coords="140,270,210,340"
                      href="categoryForm?categoryId=REPTILES" shape="RECT" id="REPTILES"/>
                <area alt="Cats" coords="225,240,295,310"
                      href="categoryForm?categoryId=CATS" shape="RECT" id="CATS"/>
                <area alt="Birds" coords="280,180,350,250"
                      href="categoryForm?categoryId=BIRDS" shape="RECT" id="BIRDS"/>
            </map>
            <img height="355" src="images/splash.gif" align="middle"
                 usemap="#estoremap" width="350" /></div>
    </div>

    <div id="Separator">&nbsp;</div>
</div>
<!-- 卡片组 -->
<section class="home-cards">
    <div>
        <img src="images/petcard1.jpg" alt="">
        <h3>Choosing the Best </h3>
        <p>
            Discover how to make informed decisions in life, from picking the right products to choosing
            the paths that shape your future.
        </p>
        <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>

    </div>
    <div>
        <img src="images/petcard2.jpg" alt="" />
        <h3>Love Without Limits</h3>
        <p>
            Love knows no boundaries. Embrace the beauty of unconditional relationships and
            find inspiration to nurture deeper connections with those you cherish most.
        </p>
        <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>
    </div>
    <div>
        <img src="images/petcard3.jpg" alt="" />
        <h3>Caring for Your Pet</h3>
        <p>
            Your furry friends deserve the best care. From grooming to nutrition,
            uncover tips and tricks to ensure your pets stay healthy, happy, and full of energy.
        </p>
        <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>
    </div>
    <div>
        <img src="images/petcard4.jpg" alt="" />
        <h3>Endless Love</h3>
        <p>
            True love knows no bounds. Celebrate the beauty of everlasting
            connections that bring joy, comfort, and meaning to life.
        </p>
        <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>
    </div>
</section>
<!--Carbon-->
<section class="carbon dark"><!--可能被两个修饰 .carbon .dark-->
    <div class="content">
        <h2>Choose Pets</h2>
        <p>
            Find the perfect companion to bring joy and love into your life. From playful puppies to cuddly kittens,
            learn how to choose a pet that fits your lifestyle and becomes a cherished member of your family.
        </p>
        <a href="#" class="btn">
            Learn More<i class="fa-solid fa-chevron-right"></i>
        </a>

    </div>
</section>
<%@include file="../common/bottom.jsp"%>